<template>
  <div class="front-content">
    <el-row :gutter="12">
      <el-col :span="5" v-for="item in items" :key="item.id">
        <el-card
          @click.native="openUrl(item.url, item.id)"
          shadow="hover"
          class="card-item"
        >
          <img class="item-icon" :src="item.icon" />
          <span class="item-content">{{ item.name }}</span>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>



<script>
import { getBookMarkByType } from '@/api/bookmark';
import { addVisit } from '@/api/visit';
export default {
  name: 'bookmarkView',
  props: ["type"],
  data () {
    return {
      items: [],
      count: 0,
    }
  },
  methods: {
    getBookMark (val) {
      getBookMarkByType(val, "", "", "").then((value) => {
        this.items = value.data;
        this.count = value.total;
      }, function (error) {
        if (error.response.status == 401) {
          this.$router.push({ path: `/login` });
        }
        console.log(error);
      });
    },
    openUrl (url, id) {
      addVisit(id);
      window.open(url)
    }
  },

  updated () {
    // console.log("updated" + this.type);
    // this.getBookMark()

  },
  watch: {
    type: function (val) {
      this.getBookMark(val)
    }

  },
  mounted () {
    console.log("mounted" + this.type);
    this.getBookMark()

  }

}
</script>

<style scoped>
.item-icon {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}
.item-content {
  display: inline-block;
  /* float: right; */
}
.card-item {
  cursor: pointer;
}
</style>